<template>
  <div class="left-menu">
    <div class="menu-container">

      <el-menu :default-active="activeMenu" :router="true" :default-openeds="openeds" class="el-menu-vertical-demo" background-color="#58627A" text-color="#FFFFFF" active-text-color="#FFFFFF" @select="menuSelect">
        <template v-for="(item,index) in menus" v-if="item.children && item.children.length > 0">
          <el-submenu :key="index+''" :index="index+''">
            <template slot="title">
              <i :class="[item.icon]"></i>
              <span>{{item.name}}</span>
            </template>
            <el-menu-item :key="i+''" v-for="(submenu,i) in item.children" :index="submenu.url">
              <el-badge  class="badge-item" >{{submenu.name}}</el-badge>
            </el-menu-item>
          </el-submenu>
        </template>
        <el-menu-item :key="index+''" v-else :index="item.url">
          <i :class="[item.icon]"></i>
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
      </el-menu>

    </div>
    <div class="menu-ext mgb10">
      <div class="menu-ext-icon">
        <!-- <a style="color: #909399;" target="_blank" :href="helpHref"><i class="icon-hint-doubt1 mgr10 pt" v-tip.dark="'帮助中心'"></i></a> -->
        <i :class="openeds.length === 0 ? 'icon-arrows-unfold-off' : 'icon-arrows-unfold-on'" v-tip.dark="openeds.length === 0 ? '展开菜单' : '收起菜单'" @click="switchOpen"></i>
      </div>

    </div>
  </div>
</template>
<script>
  import menuModel from "@M/menu"
  import userModel from '@M/user'
  import constant from '@U/constant'

  export default {
    data() {
      return {
        menus: [],
        activeMenu: "",
        openeds: [],
        roleName: '',
        helpHref: '',
        // 增加编码到图标的映射，兼容新改版的权限菜单 [HOP 2018-05-21]
        codeIcon: {

        },
        code: ''// 记录当前一级菜单id
      }
    },
    computed: {
    },
    methods: {
      menuSelect(index) {
        this.$toPage(index);
      },
      updateMenu(code) {
        var self = this;
        //默认展开全部
        this.openeds = [];
        this.activeMenu = "";
        this.menus = [];
        this.code = code; // 记录当前一级菜单id

        //这个地方必须先清空缓存，要不然设置activeIndex会有问题
        this.$nextTick(() => {
          menuModel.listMenu((data) => {
            data.forEach(menu => {
              if (menu.id == code) {
                this.menus = menu.children || [];
                this.menus.forEach(item => {
                  if (item.url && !/^\/.*?/.test(item.url)) {
                    item.url = "/" + item.url;
                  }
                  if (item.children) {
                    item.children.forEach(item2 => {
                      if (item2.url && !/^\/.*?/.test(item2.url)) {
                        item2.url = "/" + item2.url;
                      }
                    });
                  }
                });
                
                if(this.menus.length < 1){
                  this.$root.eventHandle.$emit("UPDATE_SUB_MENU_INDEX", false)
                }else{
                  if(menu.showReg == ''){
                    this.$root.eventHandle.$emit("UPDATE_SUB_MENU_INDEX", true)
                  }else{
                    let reg = new RegExp(menu.showReg)
                    if(reg.test(this.$route.fullPath)){
                      this.$root.eventHandle.$emit("UPDATE_SUB_MENU_INDEX", true)
                    }else{
                      this.$root.eventHandle.$emit("UPDATE_SUB_MENU_INDEX", false)
                    }
                  }
                }

                this.switchOpen();
              }
            });
          });
          this.updateActive();
          
        });
      },
      getParent(r) {
        if (!r.meta.parent) {
          return r;
        }
        var parentPath = r.meta.parent;
        for (let i = 0; i < this.$router.options.routes.length; i++) {
          let item = this.$router.options.routes[i];
          if (item.path == parentPath) {
            return this.getParent(item);
          }
        }
        return r;
      },
      updateActive(r) {
        r = r || this.$route;
        if (!r.name) {
          setTimeout(() => {
            r = this.$route;
            r = this.getParent(r);
            var path = r.path;
            if (!path) return;
            this.activeMenu = path;
          }, 500);
        } else {
          r = this.getParent(r || this.$route);
          var path = r.path;
          if (!path) return;
          if (r.query && typeof r.query._status != 'undefined') {
            path += "?_status=" + r.query._status;
          }
          this.activeMenu = path;
        }
      },
      switchOpen() {
        if (this.openeds.length === 0) {
          for (var i = 0; i < this.menus.length; i++) {
            this.openeds.push(i.toString());
          }
        } else {
          this.openeds = []
        }
      },
      showSubMenu(){
        menuModel.listMenu((data) => {
          data.forEach(menu => {
            if (menu.id == this.code) {
              let menus = menu.children || [];
              if(menus.length < 1){
                this.$root.eventHandle.$emit("UPDATE_SUB_MENU_INDEX", false)
              }else{
                if(menu.showReg == ''){
                  this.$root.eventHandle.$emit("UPDATE_SUB_MENU_INDEX", true)
                }else{
                  let reg = new RegExp(menu.showReg)
                  if(reg.test(this.$route.fullPath)){
                    this.$root.eventHandle.$emit("UPDATE_SUB_MENU_INDEX", true)
                  }else{
                    this.$root.eventHandle.$emit("UPDATE_SUB_MENU_INDEX", false)
                  }
                }
              }
            }
          });
        });
      }
    },
    mounted() {
      let self = this
      this.$root.eventHandle.$on("UPDATE_SUB_MENU", (code) => {
        this.updateMenu(code);
      });
      this.$root.eventHandle.$on("UPDATE_SUB_MENU_SHOW", (code) => {
        this.showSubMenu();
      });
      this.$root.eventHandle.$on("ACTIVE_MENU", (r) => {
        this.updateActive(r);
      });

    }
  }
</script>

<style lang="scss">
  .menu-container {
    & .el-submenu__title,
    & .el-menu-item {
      & span {
        margin-left: 8px;
      }
      & i {
        color: #FFF;
      }
      & .is-wkt {
        position: absolute;
        right: 8px;
        top: 20px;
        border-radius: 2px;
        padding: 0 4px;
        font-size: 12px;
        height: 22px;
        line-height: 22px;
        background: #7498EB;
      }
    }
    &-tag {
      position: absolute;
      right: 9px;
      top: 17px;
      padding: 0 5px;
      line-height: 22px;
      font-size: 12px;
      font-weight: 300;
      background: #7498EB;
    }
    .badge-item {
      .el-badge__content.is-fixed {
        top: 18px;
        right: -5px;
      }
      .el-badge__content {
        border: none;
      }
    }
  }
</style>


<style lang="scss" scoped>
  @import '../assets/scss/variable.scss';
  @import '../assets/scss/mixin.scss';
  .left-menu {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    background-color: $xy-background-dark;
    width: 100%;
  }

  .menu-container {
    -webkit-box-flex: 1;
    width: 100%;
    overflow-y: auto;
    @include scroll();

    // 主体区域需要显示滚动条
    &::-webkit-scrollbar {
      width: 0px!important;
    }

    & .el-menu-vertical-demo {
      width: 100%;
    }
  }

  .menu-ext {
    position: relative;
    height: auto;
    width: 100%;
    text-align: center;
    padding: 5px 20px 0 20px;
    padding-top: 5px;
    box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.20);
  }

  .menu-ext-container {}

  .menu-ext-desc {
    font-size: 12px;
    color: $xy-text-color-placeholder;
  }

  .menu-ext-icon {
    color: $xy-text-color-secondary;
    text-align: right;
  }

  .menu-ext-icon i:hover {
    color: $xy-color-main;
  }

  .menu-ext-button {
    width: 100%;
  }

  .menu-ext-button-diy {
    &.el-button {
      background-color: #41495B;
      color: $xy-text-color-placeholder;
      border-color: #41495B;
      &:hover {
        // background-color: rgb(78, 85, 102);
        color: $xy-color-main;
      }
    }
  }

  .el-submenu {}

  .el-menu {
    border-right: none;
  }

  .el-menu-item {
    border-left: 3px solid $xy-background-dark;
    &:hover {
      border-left: 3px solid rgb(70, 78, 98);
    }
    &.is-active {
      background-color: #41495b !important;
      border-left: 3px solid $xy-color-main;
    }
  }

  .el-menu--inline {
    & .el-menu-item {
      padding-left: 47px !important;
    }
  }

  .el-submenu .el-menu-item {
    min-width: auto;
  }

  .icon-arrows-unfold-on {
    cursor: pointer;
  }

  .icon-arrows-unfold-off {
    cursor: pointer;
  }
</style>
